<style lang="less" scoped>
    .switch-node{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #cccccc;
        padding: 0.5rem 1rem;
        height: 3rem;

        .switch-btn{
            border:0px;
            outline: none;
            color: white;
            padding: 0.3rem 1rem;
            height: 2rem;
            border-radius: 0.2rem;
        }
        .switch-btn-open{
            background: #00e674;
        }
        .switch-btn-close{
            background: #ffb023;
        }

    }
</style>
<template>
    <div class="switch-node">
            <light-icon type="deng" :size="40" :color="iconColor"></light-icon>
        <div>
            <span :style="{color:onlineColor}">{{switchInfo['circuit_name']}}</span>
        </div>
        <div>
            <button class="switch-btn switch-btn-open" @click="openLight">开</button>
            <button class="switch-btn switch-btn-close" @click="closeLight">关</button>
        </div>
        <div style="position:absolute;width:100%;text-align: center" v-if="spinnerShow">
            <spinner type="bubbles" size="40px"></spinner>
        </div>
    </div>
</template>


<script>
    import LightIcon from '../../../components/light-icon.vue'
    import { Spinner } from 'vux'
    export default{
        props:{
            switchInfo:{
                type:Object
            }
        },
        data(){
            return {
                spinnerShow:false
            }
        },
        components: {
            LightIcon,Spinner
        },
        computed: {
            iconColor(){
                if(this.switchInfo.circuit_switch > 0){
                    return  "#faea1e"
                }else {
                    return "#cccccc"

                }
            },
            onlineColor(){
                if(this.switchInfo.concentrator_online >0){
                    return "#181818";
                }else {
                    return "#cccccc";
                }
            }
        },
        methods: {
            openLight(){
                this.controlSwitch(1);
            },
            closeLight(){
                this.controlSwitch(0);
            },
            controlSwitch(sw){
                let data={
                    conNumber:this.switchInfo.concentrator_number,
                    nodeip:this.switchInfo.node_ip,
                    circuit:this.switchInfo.circuit_number,
                    sw:sw
                }
                this.spinnerShow = true;
                setTimeout(()=>{
                    this.$emit("updateData");
                    this.spinnerShow = false;

                },3000);
                this.$store.dispatch('ControlSwitch',data).then((data) => {
                    if (data.status == 1) {

                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }

                }).catch((err) => {

                });
            }
        },
        created: function () {

        }
    }
</script>
